import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Table, Modal } from 'antd';
import changeName from './changeTxt';
import AddMatModalForm from './AddMatModalForm';

@connect(({ inservicematerial, loading }) => ({
  inservicematerial,
  loading: loading.models.inservicematerial,
}))
@Form.create()
class AddMetialModal extends PureComponent {
  state = {
    nowPage: 1, // 当前页
    pageNum: 5, // 单页条数
    selectedRowKeys: [],
    selectedRows: [],
  };

  componentDidMount() {}

  // 搜索
  changeBig = value => {
    if (value) {
      const { changeBig } = this.props;
      changeBig(value);
    }
  };

  changeBigcode = value => {
    const { metrialLocalData } = this.props;
    const { inpType } = this.state;
    this.setState({ matId: value });
    setTimeout(() => {
      metrialLocalData(1, 5, { matId: value, inpType });
    }, 0);
  };

  inputChange = value => {
    const { metrialLocalData } = this.props;
    const { matId } = this.state;
    this.setState({ inpType: value });
    setTimeout(() => {
      metrialLocalData(1, 5, { inpType: value, matId });
    }, 0);
  };

  changeOkMaterial = () => {
    const { changeOkMaterial } = this.props;
    const { selectedRows } = this.state;

    changeOkMaterial(selectedRows);
  };

  onSelectChange = (currentSelectedRowKeys, currentSelectedRows) => {
    let { selectedRows, selectedRowKeys } = this.state;
    if (selectedRowKeys.length === 0) {
      selectedRows = [...currentSelectedRows];
      selectedRowKeys = [...currentSelectedRowKeys];
    } else if (currentSelectedRowKeys.length >= selectedRowKeys.length) {
      const addRows = currentSelectedRows.filter(
        row => selectedRowKeys.indexOf(row && row.matId) === -1
      );
      selectedRows = selectedRows.concat(addRows);
    } else {
      const deleRowKeys = [...selectedRowKeys].filter(x => !currentSelectedRowKeys.includes(x));
      selectedRows = selectedRows.filter(row => deleRowKeys.indexOf(row && row.matId) === -1);
    }
    this.setState({
      selectedRowKeys: currentSelectedRowKeys,
      selectedRows: selectedRows.filter(item => item),
    });
  };

  clearSelected = () => {
    this.setState({
      selectedRowKeys: [],
      selectedRows: [],
      nowPage: 1,
      pageNum: 5,
      inpType: undefined,
      matId: undefined,
    });
  };

  render() {
    const {
      visMaterial,
      inputType,
      modelsData,
      handleModalVisible,
      flagList,
      metrialLocalData,
    } = this.props;
    const { selectedRowKeys, selectedRows, nowPage, pageNum, inpType, matId } = this.state;
    // 添加材料的多选
    const rowSelectionMaterial = {
      selectedRowKeys,
      selectedRows,
      onChange: this.onSelectChange,
    };
    const columnsMaterial = [
      {
        title: '材料名称',
        dataIndex: 'matName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '输入类型',
        dataIndex: 'inpTypeName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '是否支持判断',
        dataIndex: 'judgeFlagName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'center' } }),
      },
    ];
    const paginations = {
      current: nowPage,
      pageSize: pageNum,
      total: modelsData.cmTotal,
      showSizeChanger: true,
      size: 'small',
      onChange: (page, pageSize) => {
        this.setState({ nowPage: page, pageNum: pageSize });
        metrialLocalData(page, pageSize, { matId, inpType });
      },
      onShowSizeChange: (current, size) => {
        this.setState({ nowPage: current, pageNum: size });
        metrialLocalData(current, size, { matId, inpType });
      },
      showTotal: total => {
        const totalPage =
          total < paginations.pageSize ? 1 : Math.ceil(total / paginations.pageSize);
        return `共 ${total} 条记录 第 ${nowPage} / ${totalPage}页`;
      },
    };

    return (
      <div>
        <Modal
          title="请选择材料属性"
          visible={visMaterial}
          onOk={this.changeOkMaterial}
          onCancel={() => handleModalVisible(false)}
          afterClose={this.clearSelected}
          destroyOnClose
          width={640}
        >
          <Form>
            <AddMatModalForm
              inputChange={this.inputChange}
              changeBig={this.changeBig}
              changeBigcode={this.changeBigcode}
              inputType={inputType}
            />
          </Form>
          <Table
            dataSource={changeName(modelsData.addMetial, inputType, flagList)}
            columns={columnsMaterial}
            rowSelection={rowSelectionMaterial}
            style={{ backgroundColor: '#fff', textAlign: 'center' }}
            rowKey={record => record.matId}
            pagination={paginations}
          />
        </Modal>
      </div>
    );
  }
}
export default AddMetialModal;
